<template>
  <div class="hot">
    <div class="hot-title">
      <h3>当季热门门票</h3>
    </div>
    <a href="#" class="item" v-for="item in HotList" :key='item.id'>
      <div class="img">
        <img :src="item.url" alt="">
      </div>
      <div class="content">
        <div>
          <div class="title">{{item.title}}</div>
          <div class="detail">{{item.detail}}</div>
          <div class="price">{{item.price}}</div>
        </div>
      </div>
    </a>
  </div>
</template>

<script>
  export default {
    name:'HomeWeekend',
    data() {
      return {
        HotList:[{
          id:'0001',
          url:'//img1.qunarzz.com/sight/p0/1712/16/16dd785ae3e2447ba3.img.jpg_256x160_78063187.jpg',
          title:'峨眉山',
          detail:'云上金顶，天下峨眉',
          price:'¥0.1'
        },{
          id:'0002',
          url:'//img1.qunarzz.com/sight/p0/1712/16/16dd785ae3e2447ba3.img.jpg_256x160_78063187.jpg',
          title:'峨眉山',
          detail:'云上金顶，天下峨眉',
          price:'¥0.1'
        },{
          id:'0003',
          url:'//img1.qunarzz.com/sight/p0/1712/16/16dd785ae3e2447ba3.img.jpg_256x160_78063187.jpg',
          title:'峨眉山',
          detail:'云上金顶，天下峨眉',
          price:'¥0.1'
        },{
          id:'0004',
          url:'//img1.qunarzz.com/sight/p0/1712/16/16dd785ae3e2447ba3.img.jpg_256x160_78063187.jpg',
          title:'峨眉山',
          detail:'云上金顶，天下峨眉',
          price:'¥0.1'
        }]
      }
    },
  }
</script>

<style lang="stylus" scoped>
  .hot
    .hot-title
      margin .2rem
      h3
        font-size .38rem
        font-weight 550
        color #15161a
    .item
      //flex 1
      overflow hidden
      float left
      width 50%
      //margin .3rem
      //padding .2rem
      .img
        //width 227px
        //height 160px
        margin  .2rem
        img
          height auto 
          width 100%
          border-radius .15rem
    .content
      margin-left .2rem
      overflow hidden
      white-space: nowrap
      text-overflow: ellipsis
      .title
        font-size .32rem
        color #15161a
      .detail
        color #ccc
        padding .1rem 0
      .price
        font-size .36rem
</style>